<template>
  <div>

    <!-- 自定义指令

         全局自定义指令
             Vue.directive('指令名',{
               // 指令的生命周期
                bind:绑定时，类似于beforeMount
                (*)inserted:指令所在节点添加到父节点时执行，类似于mounted
                update:指令所在组件有更新，且不保证更新完成
                (*)componentUpdated:指令所在组件有更新，且更新完成时（指令所在组件包括子组件都更新完成才执行）,类似于updated
                unbind:解绑时，类似destroyed
             })
         局部自定义指令
             directives:{
                指令名:{
                  // 指令的生命周期
                }
             }
         使用自定义指令
            <div v-指令名:属性名.修饰符=值>123</div>
                  v-on:keyup.enter="fn"

-->
    <!-- 类似v-text指令 -->
    <div v-hmtext="xxx" />
    <hr>
    <h2>{{ xxx }}</h2>
    <button @click="xxx='abcdefg'">修改xxx</button>

    <hr>

    <!-- 需求：img标签通过自定义指令来渲染图片 -->
    <img v-showimg="img" style="width:100px;height:100px;" alt="">
    <button @click="img='http://t13.baidu.com/it/u=3708981586,196211859&fm=224&app=112&f=JPEG?w=237&h=237'">修改img</button>

    <!-- 资源 加载 出错处理 -->
    <img ref="img" src="http://t13.b12aidu.com/it/u=3708981586,196211859&fm=224&app=112&f=JPEG?w=237&h=237" alt="">
  </div>
</template>
<script>
export default {

  directives: {
    hmtext: {
      inserted(dom, obj, vnode) {
        // dom:指令所在标签dom
        // obj:{属性名  修饰符   值}
        // vnode:指令所在标签的虚拟dom信息，它内部有一个context:相当于指令所在组件的this
        console.log(dom, obj, vnode)
        dom.innerText = obj.value
      },
      componentUpdated(dom, obj, vnode) {
        dom.innerText = obj.value
      }
    },
    showimg: {
      inserted(dom, obj, vnode) {
        dom.src = obj.value
      },
      componentUpdated(dom, obj, vnode) {
        dom.src = obj.value
      }

    }
  },
  data() {
    return {
      xxx: 'abc',
      img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
    }
  },
  mounted() {
    //  dom.addEventListener('error',()=>{})
    this.$refs.img.addEventListener('error', () => {
      console.log('图片加载 出错了')
    })
  }
}
</script>
<style>
</style>
